<template>
  <view class="Select class">
    <picker
      :range="dataSource"
      :range-key="labelKey"
      :value="selectedIndex"
      @change="pickerChangeHandler"
    >
      <view class="Content">
        <view class="Label">
          {{ selectedItem ? getItemLabel(selectedItem) : placeholder }}
        </view>
        <uni-icons type="arrowright" />
      </view>
    </picker>
  </view>
</template>
<script lang="ts">
import Vue from '@/utils/Vue';
import { PropType } from 'vue';
import ProjectUtil from '@/utils/ProjectUtil';
import IVueEvent from '@/interfaces/IVueEvent';

interface IData {
  selectedIndex?: number;
}

export default Vue.extend({
  data(): IData {
    return {
      selectedIndex: undefined,
    };
  },
  components: {},
  props: {
    placeholder: {
      type: String,
      default: '请选择',
    },
    dataSource: Array as PropType<any[]>,
    valueKey: {
      default: 'value',
      type: String,
    },
    labelKey: {
      default: 'label',
      type: String,
    },

    selectedValue: {
      type: [Number, String],
      default: '',
    },
  },
  emits: ['change'],
  computed: {
    selectedItem(): any {
      const { selectedIndex, dataSource } = this;
      if (selectedIndex === undefined || !dataSource) {
        return undefined;
      }
      return dataSource[selectedIndex];
    },
  },
  watch: {
    selectedValue(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.updateSelectedIndex();
      }
    },

    dataSource(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.updateSelectedIndex();
      }
    },
  },
  mounted() {
    this.updateSelectedIndex();
  },
  methods: {
    updateSelectedIndex() {
      console.log('updateSelectedIndex');
      if (
        this.selectedValue === undefined ||
        !this.dataSource ||
        !this.dataSource.length
      ) {
        this.selectedIndex = undefined;
      }

      const index = this.dataSource.findIndex(
        (item) => this.getItemValue(item) === this.selectedValue
      );
      this.selectedIndex = index >= 0 ? index : undefined;
    },
    getItemValue(item: any) {
      return item[this.valueKey];
    },

    getItemLabel(item: any) {
      return item[this.labelKey];
    },

    pickerChangeHandler(event: IVueEvent) {
      const index = event.detail.value;
      if (!this.dataSource || index < 0 || index >= this.dataSource.length) {
        return;
      }
      const data = this.dataSource[index];
      const value = data[this.valueKey];

      this.selectedIndex = index;
      ProjectUtil.emit(this, 'change', { value, data });
      this.$emit('update:selectedValue', value);
    },
  },
  options: { virtualHost: true },
  externalClasses: ['class'],
});
</script>
<style lang="less" scoped>
.Select {
  padding: 10px;
  border: solid 1px #ebebeb;
  border-radius: 5px;
  flex-grow: 1;
  flex-shrink: 1;
  background: white;

  .Content {
    display: flex;
    align-items: center;

    .Label {
      flex-grow: 1;
      flex-shrink: 1;
      margin-right: 8px;
    }
  }
}
</style>
